<script setup>
import {ref} from 'vue'
import {defineProps} from "vue"
import {isJoinExam, listEndExams, listOngoingExams} from "../../api/course/course.js";
import router from "../../router/index.js";
import {ElMessage} from "element-plus";
import {isPermission} from "../../utils/utils.js";
const prop = defineProps(['courseId'])

// 选择器
const radio = ref(1)
// 考试列表
const exams=ref([]);
// 考试图标
const examsImg=['https://iflytek-education.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240712184038.png','https://iflytek-education.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240712184044.png']
// 获取考试列表
const handleListExams=async ()=>{
  exams.value=[];
  await listOngoingExams(prop.courseId).then(res=>{
    // 进行中
    if(res.data.length!==0)
      exams.value.push.apply(exams.value,res.data);
      exams.value.map( exam=>{exam['img']=0;return exam; })
  })
  // 结束
  await listEndExams(prop.courseId).then(res=>{
    if(res.data.length!==0)
      exams.value.push.apply(exams.value,res.data);
      exams.value.map( exam=>{
        if(!('img' in exam))
          exam['img']=1;
        return exam;
      })
    console.log(exams.value);
  })
}




// 筛选考试列表
const handleConditionListExams=async ()=>{
  if(radio.value===1)
   await handleListExams();
  else if(radio.value===2)
    await listOngoingExams(prop.courseId).then(res=>{
      exams.value=res.data;
      exams.value.map( exam=>{exam['img']=0;return exam; })
    });
  else if(radio.value===3)
    await listEndExams(prop.courseId).then(res=>{
      exams.value=res.data;
      exams.value.map( exam=>{exam['img']=1;return exam; })
    });
  console.log(exams.value);
}

// 点击考试跳转
const handleGoExam=async (exam)=>{
  if(exam.img===0)
    await handleIsJoinExam(exam.id);
}

const handleGoExamManage=()=>{
  router.push("/examsmanage")
}
// 查看是否已经参加过这次考试了
const handleIsJoinExam=async (examId)=>{
  await isJoinExam(examId).then(res=>{
    if(res.data===false)
      router.push("/exam/"+examId)
    else
      ElMessage({
        message: '您已经参加过该考试了',
        type: 'warning',
      })
  })
}




handleListExams();


</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header style="height: 100px;">
        <el-divider style="margin-top: 50px"></el-divider>
        <el-form-item label="筛选">
          <el-radio-group
              v-model="radio"
              @change="handleConditionListExams"
          >
            <el-radio :value="1">全部</el-radio>
            <el-radio :value="2">进行中</el-radio>
            <el-radio :value="3">已结束</el-radio>
          </el-radio-group>
          <el-button type="primary" style="margin-left: auto;" @click="handleGoExamManage()" v-if="isPermission(2)">考试管理</el-button>
        </el-form-item>
      </el-header>

      <el-main style="height: 60vh;">
        <el-card v-for="(exam,index) in exams" :key="index" style="margin-top: 10px;" @click="handleGoExam(exam)">
          <div style="display: flex;align-items: center;">
            <img class="exam-img" :src="examsImg[exam.img]"/>
            <span>{{exam.name}}</span>
            <div style="margin-left: auto;">
              <span style="margin-right: 20px">结束时间</span>
              <span>{{ new Date(exam.endTime).toLocaleString('zh-CN', { month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', hour12: true }).replace('上午', 'AM').replace('下午', 'PM').replace('AM', '上午').replace('PM', '下午') }}</span>
            </div>
          </div>
        </el-card>
      </el-main>

    </el-container>
  </div>
</template>

<style scoped lang="less">
.exam-img {
  width: 60px;
  height: 60px;
  margin-right: 10px;
  border-radius: 2px;
}
</style>